$(function(){
  var mouse = {
      X   : 0,
      Y   : 0,
      CX  : 0,
      CY  : 0
    },
    block = {
      X   : mouse.X,
      Y   : mouse.Y,
      CX  : mouse.CX,
      CY  : mouse.CY
    };
  var mousein = false;

  $(".item").hover(function(){
    $(".block").css("box-shadow", "0px 0px 10px #222");
    $(".bg").css("opacity", 0.5);
    $(".text").fadeTo("slow", 1);
  }, function(){
    $(".block").css("box-shadow", "0px 0px 0px #333");
    $(".bg").css("opacity", 1);
    $(".text").fadeTo("slow", 0.3);
  });

  $(".block").hover(function(){
    $(".block").css("box-shadow", "0px 0px 50px #333");
    $(".bg").css("opacity", 0.05);
  },function(){
    $(".block").css("box-shadow", "0px 0px 10px #222");
    $(".bg").css("opacity", 0.5);
  });

  $('.block').on('mousemove', function(e) {
    mouse.X   = (e.pageX - $(this).offset().left) - $('.block').width() / 2;
    mouse.Y   = (e.pageY - $(this).offset().top) - $('.block').height() / 2;
    mousein = true;
    change();
  })

  $('.block').on('mouseleave', function(e) {
    mouse.X   = mouse.CX;
    mouse.Y   = mouse.CY;
    mousein = false;
  })

  function change() {
    if(mousein){
       setTimeout(function(){
        block.CY   += (mouse.Y - block.CY) / 12;
        block.CX   += (mouse.X - block.CX) / 12;
        $('.block .circleLight').css('background', 'radial-gradient(circle at ' + mouse.X + 'px ' + mouse.Y + 'px, #fff, transparent)')
        $('.block').css({
          transform : 'scale(1.03) translate(' + (block.CX * 0.05) + 'px, ' + (block.CY * 0.05) + 'px) rotateX(' + (block.CY * 0.05) + 'deg) rotateY(' + (block.CX * 0.05) + 'deg)'
        });
        change();
      }, 50);
     }else{
        $(".block").css("transform", 'scale(1.03) translate(0px, 0px) rotateX(0 deg) rotateY(0 deg)');
     }
  }

  $("#login").on("click", function(){
    var $btn = $(this).button('loading');
    $btn.button('reset');
    location.href = "index.html";
  });
});